<template>
  <div class="home">
    <background-animation />
    <author-info />
    
    <div class="container">
      <div class="header">
        <img src="../assets/熊猫.svg" class="panda-svg" alt="熊猫" />
        <h1>凤果子变量命名助手</h1>
      </div>
      
      <name-form @generate="handleGenerate" />
      
      <suggestions-list 
        v-if="suggestions.length"
        :suggestions="suggestions" 
      />
      
      <donate-button />
    </div>
  </div>
</template>

<script>
import BackgroundAnimation from '../components/BackgroundAnimation.vue'
import NameForm from '../components/NameForm.vue'
import SuggestionsList from '../components/SuggestionsList.vue'
import DonateButton from '../components/DonateButton.vue'
import AuthorInfo from '../components/AuthorInfo.vue'

export default {
  name: 'Home',
  components: {
    BackgroundAnimation,
    NameForm,
    SuggestionsList,
    DonateButton,
    AuthorInfo
  },
  data() {
    return {
      suggestions: [],
    }
  },
  methods: {
    handleGenerate(response) {
      if (response && response.success) {
        try {
          const suggestions = JSON.parse(response.data.data)
          this.suggestions = [{
            baseName: suggestions[0],
            suggestions: this.getLocalSuggestions(suggestions[0])
          }]
        } catch (err) {
          console.error('Parse response failed:', err)
          this.suggestions = []
        }
      } else {
        this.suggestions = [{
          baseName: response.description,
          suggestions: this.getLocalSuggestions(response.description)
        }]
      }
    },

    getLocalSuggestions(description) {
      const words = description.toLowerCase().trim().split(/\s+/)
      return [
        {
          style: '小驼峰',
          value: words.map((word, i) => 
            i === 0 ? word : word.charAt(0).toUpperCase() + word.slice(1)
          ).join('')
        },
        {
          style: '大驼峰',
          value: words.map(word => 
            word.charAt(0).toUpperCase() + word.slice(1)
          ).join('')
        },
        {
          style: '下划线',
          value: words.join('_')
        },
        {
          style: '大写下划线',
          value: words.join('_').toUpperCase()
        },
        {
          style: '小写下划线',
          value: words.join('_').toLowerCase()
        },
        {
          style: '连字符',
          value: words.join('-').toLowerCase()
        }
      ]
    }
  }
}
</script>

<style scoped>
.home {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow-x: hidden;
  width: 100%;
}

.container {
  width: 100%;
  max-width: 768px;
  margin: 2rem;
  padding: 0 1rem;
  animation: fadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  margin-bottom: 100px;
}

@media (max-width: 640px) {
  .container {
    margin: 1rem;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-bottom: 2.5rem;
}

.panda-svg {
  width: 80px;
  height: 80px;
  animation: pandaBounce 2s infinite ease-in-out;
}

h1 {
  margin-bottom: 0;
  text-align: left;
  font-size: clamp(2rem, 5vw, 2.5rem);
  font-weight: 600;
  background: linear-gradient(120deg, #4f46e5, #ec4899);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@keyframes pandaBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@media (max-width: 640px) {
  .header {
    gap: 16px;
  }
  
  .panda-svg {
    width: 50px;
    height: 50px;
  }
}
</style> 